<template>
 <div class="container">
 <item :data="value"  v-for="(value,index) of playlists" :key="value.id"  @click.native="handledelete(index)"></item>
  </div>
</template>

<script>
import Item from '../../components/item'
export default {
    name:"all",
    data() {
        return {
            playlists:[]
        }
    },
    components:{
        Item
    },
    mounted(){
        this.axios.get("top/playlist").then(res=>{
            this.playlists= res.data.playlists
            console.log(this.playlists)
        
        })
    },
    methods:{
        handledelete(index){
            this.playlists.splice(index,1)
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    margin-top: 5px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px 5px;
    justify-items: center;

}
    
</style>